<template>
  <component v-for="(value, key) in popups" :key="key" :id="value[0]" :is="whichComponent(value)" />
</template>

<script lang="ts">
export default {
  name: 'PopupBus'
}
</script>

<script lang="ts" setup>
import LogTrace from './src/logger/LogTrace.vue'
import LogDebug from './src/logger/LogDebug.vue'
import LogInfor from './src/logger/LogInfor.vue'
import LogWarn from './src/logger/LogWarn.vue'
import LogError from './src/logger/LogError.vue'
import LogFatal from './src/logger/LogFatal.vue'
import OptionsDialog from './src/dialogues/OptionsDialog.vue'

import { getPopupsRef, createLogger, createDialogue, closePopup } from './store'
import type { PopupUnit } from './types'

function whichComponent(value: [string, PopupUnit]) {
  const [id, unit] = value
  // 依据组件的类型，决定所使用的组件
  switch (unit.class) {
    // 日志器弹窗
    case 'logger':
      switch (unit.level) {
        case 'trace':
          return LogTrace
        case 'debug':
          return LogDebug
        case 'info':
          return LogInfor
        case 'warn':
          return LogWarn
        case 'error':
          return LogError
        case 'fatal':
          return LogFatal
      }
      break
    // 对话弹窗
    case 'dialogue':
      return OptionsDialog
  }
}

const popups = getPopupsRef()

createLogger('trace', '------trace-title', 'trace-text')
createLogger('debug', '------debug-title', 'debug-text')
createLogger('info', '------info-title', 'info-text')
createLogger('warn', '------warn-title', 'warn-text')
createLogger('error', '------error-title', 'error-text')
createLogger('fatal', '------fatal-title', 'fatal-text')
// createDialogue()
</script>

<style lang="scss" scoped></style>
